<template>
	<view class="index-main">
		<view class="search-wrap">
			<NavBar right-icon="scan" @clickLeft="showCity" @clickRight="scan" backgroundColor="#e43130" color="#FFFFFF"
				statusBar="true">
				<block slot="left">
					<view class="city">
						<view class="txt-overflow-s city-text"><text class="uni-nav-bar-text">{{cityInfo.name}}</text>
						</view>
						<view class="city-icons">
							<uni-icons type="arrowdown" color="#333333" />
						</view>
					</view>
				</block>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" color="#666666" />
					<input class="nav-bar-input" confirm-type="search" type="text" placeholder="输入搜索关键词"
						@confirm="confirm">
				</view>
			</NavBar>
		</view>
		<scroll-view class="scroll-wrapper" scroll-y="true" @scrolltolower="pullUpAction">
			<uni-swiper-dot class="banner-box" :current="current" :info="bannerList" mode="round">
				<swiper class="swiper-box" @change="topSwiperTab" interval="5000" autoplay circular>
					<swiper-item v-for="(item ,index) in bannerList" :key="index">
						<view class="swiper-item">
							<image class="banner-img" :src="item.imgHref"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="menu-box">
				<view class="menu-content">
					<view class="menu-item" v-for="item in menuList">
						<image class="menu-icon" :src="item.icon"></image>
						<text class="menu-text">
							{{item.text}}
						</text>
					</view>
				</view>
			</view>
			<view class="seckill-box">
				<view class="top-wrap">
					<text class="top-left">京东秒杀</text>
					<view class="top-center">
						<text class="seckill-time-text">12</text>
						<image class="seckill-time-icon" src="/static/images/seckill-time-icon.png"></image>
						<text class="j_sk_time">01</text>
						<text class="seckill-time-separator">:</text>
						<text class="j_sk_time">42</text>
						<text class="seckill-time-separator">:</text>
						<text class="j_sk_time">43</text>
					</view>
					<view class="top-right">
						更多秒杀<image class="more-icon" src="/static/images/more-icon.png"></image>
					</view>
				</view>
				<view class="bottom-wrap">
					<view class="seckill-item" v-for="item in seckillList">
						<image class="seckill-img" :src="item.icon"></image>
						<text class="price"><text class="symbol">¥</text>{{item.price}}</text>
						<text class="init-price"><text class="symbol">¥</text>{{item.initPrice}}</text>
					</view>
				</view>
			</view>
			<view class="recommend-box">
				<view class="recommend-item" v-for="item in recommendList">
					<image class="recommend-avator" :src="item.icon"></image>
					<view class="recommend-text">
						<view class="text">{{item.name}}</view>
						<view class="text">{{item.salesVolume}}</view>
					</view>
				</view>
			</view>
			<view class="goods-box">
				<view class="goods-item" v-for="item in goodsList" @click="goodsDetailsAction">
					<image class="goods-avator" :src="item.icon"></image>
					<view class="similar-goods-text">{{item.desc}}</view>
					<view class="goods-info">
						<text class="price">¥{{item.price}}</text>
						<text class="similar">看相似</text>
					</view>
				</view>
			</view>
			<view class="loadMore-box flex-center">
				<uni-load-more iconType="circle" :status="more"></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import Vue from 'vue';
	import util from '@/static/js/util';
	import NavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import {
		mapState
	} from 'vuex'
	export default Vue.extend({
		data() {
			return {
				current: 0,
				bannerList: [],
				menuList: [],
				seckillList: [],
				recommendList: [],
				goodsList: [],
				scrollLock: false,
				more: 'loading'
			}
		},
		computed: {
			...mapState({
				cityInfo: (state: any) => state.cityList.cityInfo
			})
		},
		onShow() {
			console.log('=====')
		},
		onLoad() {
			const _this: any = this
			uni.setNavigationBarTitle({
				title: ''
			})
			_this.getBannerListAction()
			_this.getMenuListAction()
			_this.getSeckillListAction()
			_this.getRecommendListAction()
			_this.getGoodsListAction()
		},
		methods: {
			topSwiperTab(e: any) {
				const _this: any = this;
				_this.current = e.detail.current;
			},
			/**
			 * 轮播图列表
			 */
			async getBannerListAction() {
				const _this: any = this
				let params = {}
				let res = await _this.axios.post(_this.api.getBannerList)
				if (res.code == 200) {
					_this.bannerList = res.data
				}
			},
			/**
			 * 菜单列表
			 */
			async getMenuListAction() {
				const _this: any = this
				let params = {}
				let res = await _this.axios.post(_this.api.getMenuList)
				if (res.code == 200) {
					_this.menuList = res.data
				}
			},
			/**
			 * 秒杀商品列表
			 */
			async getSeckillListAction() {
				const _this: any = this
				let params = {}
				let res = await _this.axios.post(_this.api.getSeckillList)
				if (res.code == 200) {
					_this.seckillList = res.data
				}
			},
			/**
			 * 推荐商品列表
			 */
			async getRecommendListAction() {
				const _this: any = this
				let params = {}
				let res = await _this.axios.post(_this.api.getRecommendList)
				if (res.code == 200) {
					_this.recommendList = res.data
				}
			},
			/**
			 * 商品列表
			 */
			async getGoodsListAction() {
				const _this: any = this
				let params = {}
				let res = await _this.axios.post(_this.api.getGoodsList)
				if (res.code == 200) {
					let list = res.data
					_this.goodsList = _this.goodsList.concat(list)
					_this.scrollLock = false
				}
			},
			showCity() {

				util.jumpPage('/pages/cityList/cityList')
				// uni.showToast({
				// 	title: '选择城市'
				// })
			},
			scan() {
				util.jumpPage('/pages/demo/demo')
				
				return
				if(process.env.VUE_APP_PLATFORM=='h5') {
					uni.showToast({
						title: 'h5暂不支持此功能',
						icon: 'none'
					})
					return
				}

				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.showToast({
							title: '扫码成功'
						})
					}
				});
			},
			confirm() {
				uni.showToast({
					title: '搜索'
				})
			},
			pullUpAction() {
				const _this: any = this
				if (_this.scrollLock) return
				_this.scrollLock = true
				_this.getGoodsListAction()
			},
			goodsDetailsAction() {
				util.jumpPage('/pages/goodsDetails/goodsDetails')
			}
		},
		components: {
			NavBar
		}
	});
</script>

<style lang="scss">
	@import "./index.scss";
</style>
